<template>
  <div class="content">
    <RadioGroup v-model="appointvalue" vertical>
      <Radio label="小休" border class="radio" ></Radio>
      <RadioGroup v-model="restreason" vertical v-show="appointvalue=='小休'" class="reason">
        <Radio label="休息10分钟" border class="radio"></Radio>
        <Radio label="打电话去" border class="radio"></Radio>
        <Radio label="喝水去" border class="radio"></Radio>
        <Radio label="卫生间去" border class="radio"></Radio>
      </RadioGroup>
      <Radio label="整理" border class="radio"></Radio>
      <Radio label="其他" border class="radio"></Radio>
    </RadioGroup>
  </div>
</template>

<script>

    /*const enableAppointStates = ['notReady', 'afterWork', 'otherWork'];*/
    export default {
        name: "Appointment",
        data(){
          return{
            appointvalue: "小休",
            restreason: "休息10分钟",
          }
        }
    }
</script>

<style scoped>
  .radio{
    width: 100%;
    font-size: 17px;
    margin-left: 15px;
    margin-top: 10px;
  }

  .content{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    width:100%;
    /*height:150px;*/
    margin-top: 20px;
    background:rgba(255,255,255,1);
    box-shadow:5px 7px 49px 5px rgba(44,137,234,0.13);
  }

  .reason{
     margin-left: 50px;
  }

</style>
